<template>
  <a-card size="small">
    <template #title>
      <span class="text-title2"> {{ title }} </span>
    </template>
    <template #extra>
      <a-button type="text" @click="remove">
        <template #icon>
          <DeleteOutlined />
        </template>
      </a-button>
    </template>
    <a-radio-group v-model:value="info.type">
      <a-radio
        :value="radio.value"
        v-for="(radio, rIndex) of common.dealerType"
        :key="rIndex"
      >
        <template v-if="radio.value == 3">
          {{ radio.label }}
          <a-tooltip>
            <template #title
              >选择发放出入证后表单设计中默认添加姓名、手机号码、具体房号、车辆和人脸字段不可删除,并且在审批结束后会向审批人员添加的手机号账号中发送出入证</template
            >
            <QuestionCircleOutlined style="color: #999; margin-left: 3px" />
          </a-tooltip>
        </template>
        <template v-else>
          {{ radio.label }}
        </template>
      </a-radio>
    </a-radio-group>

    <template v-if="info.type == 2">
      <a-divider style="margin: 14px 0" />
      <div>
        <span class="text-title2">添加成员</span>
        <span class="text-gray">（不能添加超过25人）</span>
      </div>
      <div class="mt-10 user-tag">
        <a-button type="link" @click="chooseMemberVisible = true" class="mr-10">
          <template #icon>
            <PlusOutlined />
          </template>
          添加
        </a-button>
        <a-tag
          closable
          v-for="(user, index) of showMemberList"
          :key="user.uid"
          @close.prevent="memberRemove(index)"
          style="margin: 5px 10px 5px 0"
        >
          <a-avatar
            :src="user.avatar"
            style="color: #fff; background-color: #2681f3"
          >
            <template #icon><UserOutlined /></template>
          </a-avatar>
          <span class="ml-10"> {{ user.realname }} </span>
        </a-tag>
      </div>
    </template>
    <!-- 选择人员 -->
    <ChooseOrgMember
      @request="$utils.commonRequest"
      :visible="chooseMemberVisible"
      :deptDisabled="true"
      :getDetail="true"
      :checkedList="memberCheckedList"
      @close="chooseMemberVisible = false"
      @success="handleChooseMemberSuccess"
    />
  </a-card>
</template>

<script>
import { defineComponent, reactive, toRefs, watch } from 'vue'
import {
  DeleteOutlined,
  PlusOutlined,
  UserOutlined,
  QuestionCircleOutlined,
} from '@ant-design/icons-vue'
import common from '../js/common'
import { ChooseOrgMember } from 'bl-common-vue3'

export default defineComponent({
  name: 'MemberSetting',
  components: {
    DeleteOutlined,
    PlusOutlined,
    UserOutlined,
    ChooseOrgMember,
    QuestionCircleOutlined,
  },
  props: {
    title: {
      type: String,
      default: '',
    },
    type: {
      type: String,
      default: 'copy',
    },
    content: {
      type: Object,
      default: () => ({
        ...common.defaultMemberCard,
      }),
    },
  },
  setup(props, { emit }) {
    const state = reactive({
      info: {},
      chooseMemberVisible: false,
      memberCheckedList: {
        user: [],
        department: [],
      },
      showMemberList: [],
    })

    const handleChooseMemberSuccess = (detail) => {
      state.showMemberList = JSON.parse(JSON.stringify(detail.user))
      state.memberCheckedList.user = JSON.parse(JSON.stringify(detail.user))
      state.info.memberList = state.showMemberList.map((item) => item.uid)
      state.info.membersShow = JSON.parse(JSON.stringify(detail.user))
      state.chooseMemberVisible = false
    }

    const memberRemove = (index) => {
      state.showMemberList.splice(index, 1)
      state.memberCheckedList.user.splice(index, 1)
      state.info.memberList.splice(index, 1)
      state.info.membersShow.splice(index, 1)
    }

    const remove = () => {
      emit('remove', { info: state.info, type: props.type })
    }
    const init = () => {
      state.info = props.content
      if (
        props.content &&
        props.content.membersShow &&
        props.content.membersShow.length > 0
      ) {
        state.showMemberList = JSON.parse(
          JSON.stringify(props.content.membersShow)
        )
        state.memberCheckedList.user = JSON.parse(
          JSON.stringify(props.content.membersShow)
        )
      }
    }
    init()

    return {
      common,
      ...toRefs(state),
      remove,
      handleChooseMemberSuccess,
      memberRemove,
    }
  },
})
</script>

<style lang="less" scoped>
.user-tag {
  :deep(.ant-tag) {
    border-radius: 20px !important;
    padding: 0 12px 0 0 !important;
    background: #f1f1f1;
    border: none;
  }
}
.text-title2 {
  font-weight: bold;
  color: rgba(0, 0, 0, 0.7);
  // padding-left: 4px;
}
</style>
